   <div id="particles">
    <form nz-form class="nz-form" [nzLayout]="'vertical'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <p style="text-align:center; widows: 100%; color: azure; font-family: 'Courier New', Courier, monospace; font-size: 20px">请假管理系统</p>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            <input formControlName="userName" nz-input placeholder="Username">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').hasError('required')">请输入账号</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').hasError('minlength')">最小长度为8</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input formControlName="password" nz-input type="password" placeholder="Password">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').hasError('required')">请输入密码</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').hasError('minlength')">最小长度为6</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" id="login-form-button" [disabled]="!validateForm.valid">Log in</button>
        </nz-form-control>
      </nz-form-item>
    </form>
    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>   
   </div>

